<template>
  <header>
    <h1>
      <a href="javascript:void(0);" @click="rememberHome">🌓 乾坤易<sup>{{ title }}</sup></a>
    </h1>
    <div class="form">
      <!-- <button @click="donate">💎 打赏</button> -->
      <button @click="donate">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-dashang"></use>
        </svg>
        打赏
      </button>

      <!-- <button style="margin-right: 3vmin" @click="showCustomerList">🗂 库</button> -->
      <button style="margin-right: 3vmin" @click="showCustomerList">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-dangan"></use>
        </svg>
        卦例库
      </button>
      <!-- <div>👤</div> -->
      <div>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-yonghu"></use>
        </svg>
      </div>
      <div class="text-box owner">
        <input
          :readonly="lock"
          type="text"
          class="input-text max-width"
          name="owner"
          v-model="owner"
          id="name"
          maxlength="10"
          placeholder="卦主信息"
        />
      </div>

      <!-- <div>💬</div> -->
      <div>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-daibanshixiang"></use>
        </svg>
      </div>
      <div class="text-box question">
        <input
          :readonly="lock"
          type="text"
          class="input-text max-width"
          name="question"
          v-model="question"
          id="question"
          maxlength="30"
          placeholder="占问事项问题"
        />
      </div>
      <!-- <button @click="showRemark">📖 断语</button> -->
      <button @click="showRemark">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-tushuguan"></use>
        </svg>
        断语
      </button>
    </div>
    <div class="toolbar">
      <button @click="toggleFullscreen" v-if="isSupportFullscreen">
        <!-- {{ fullscreen ? "🔴 退出" : "🟢 全屏" }} -->
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-fullscreen"></use>
        </svg>
        {{ fullscreen ? "退出" : "全屏" }}
      </button>
      <button class="locker" @click="lockData">
        <!-- {{ lock ? "🔒 解锁" : "🔓 加锁" }} -->
        <span v-if="lock">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-lock"></use>
          </svg>
          解锁
        </span>
        <span v-else>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-unlock"></use>
          </svg>
          加锁
        </span>
      </button>
    </div>
    <div class="modal" :class="{ show: showCustomerListModal }">
      <div class="close" @click="showCustomerListModal = false"></div>
      <div class="modal-content">
        <customerList :tableName="tableName"></customerList>
      </div>
    </div>
    <div class="modal" :class="{ show: showRemarkModal }" style="height: 17.5vmin;">
      <div class="close" @click="showRemarkModal = false" style="top: 18vmin;right: 5vmin"></div>
      <div class="modal-content" style="padding:0;height: 100%;display:flex;justify-content:center;padding: 1vmin 0 0 0">
        <textarea
          class="remark"
          name="remark"
          placeholder="断卦结论或备注（200字以内）"
          maxlength="200"
          v-model="remark"
          style="padding:2vmin;border-radius: 10px;width: 96%;"
        ></textarea>
      </div>
    </div>
  </header>
</template>

<script>
import config from "../../package.json";
import { EventBus } from "../core/event-bus";
import customerList from "./customerList.vue";
import runInApp from "../core/run-in-app";
import Fullscreen from "../core/fullscreen";

export default {
  data() {
    return {
      owner: "",
      question: "",
      remark: "",
      lock: false,
      fullscreen: false,
      showCustomerListModal: false,
      showRemarkModal: false,
      hexagramsOwner: "",
      hexagramsQuestion: "",
      hexagramsRemark: "",
      plumagramsOwner: "",
      plumagramQuestion: "",
      plumagramRemark: "",
    };
  },
  props: ["title", "link", "tableName"],
  methods: {
    showCustomerList() {
      this.showCustomerListModal = true;
      window.addEventListener("keydown", this.customerListShortKey);
    },
    showRemark() {
      this.showRemarkModal = true;
      window.addEventListener("keydown", this.remarkShortKey);
    },
    donate() {
      document.location.href = `https://gitee.com/justinalucard/hexagram/releases/tag/v${config.version}`;
    },
    toggleFullscreen() {
      // if (this.fullscreen) {
      //   if (document.exitFullscreen) document.exitFullscreen();
      //   else if (document.webkitExitFullscreen) document.webkitExitFullscreen();

      //   this.fullscreen = false;
      // } else {
      //   if (document.documentElement.requestFullscreen)
      //     document.documentElement.requestFullscreen();
      //   else if (document.documentElement.webkitRequestFullscreen)
      //     document.documentElement.webkitRequestFullscreen();
      //   this.fullscreen = true;
      // }
      this.fullscreen ? Fullscreen.exitFullscreen(): Fullscreen.requestFullscreen();
    },
    lockData() {
      this.lock = !this.lock;
      EventBus.$emit("lock", this.lock);
    },
    init(x) {
      this.owner = x.owner;
      this.question = x.question;
      this.remark = x.remark;
      this.showCustomerListModal = false;
    },
    rememberHome() {
      localStorage.setItem("hexagramHomePage", this.link);
      this.$router.replace(this.link);
    },
    customerListShortKey(event) {
      if (this.showCustomerListModal && event.key === "Escape") {
        window.removeEventListener("keydown", this.shortKey);
        this.showCustomerListModal = false;
      }
    },
    remarkShortKey(event) {
      if (this.showRemarkModal && event.key === "Escape") {
        window.removeEventListener("keydown", this.shortKey);
        this.showRemarkModal = false;
      }
    },
  },
  computed: {
    isSupportFullscreen() {
      return !runInApp.is() && Fullscreen.isSupport();
    }
  },
  mounted() {
    EventBus.$on("hexagrams-load-diagram", this.init);
    EventBus.$on("plumagrams-load-diagram", this.init);
    Fullscreen.screenChange((e, f) => {
      this.fullscreen = f;
    })
  },
  watch: {
    tableName(newVal, oldVal) {
      if (oldVal) {
        this[`${oldVal}Owner`] = this.owner;
        this[`${oldVal}Question`] = this.question;
        this[`${oldVal}Remark`] = this.remark;
        this.owner = this[`${newVal}Owner`];
        this.question = this[`${newVal}Question`];
        this.remark = this[`${newVal}Remark`];
      }
    },
  },
  components: {
    customerList,
  },
};
</script>
<style lang="scss" scoped>
header {
  background-color: var(--header-bg-color);
  color: var(--header-text-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 10vmin;
  padding: 0 4vmin;
  h1 {
    min-width: 26vmin;
    a {
      font-size: 3.6vmin;
      text-decoration: none;
      white-space: nowrap;
      position:relative;
    }
    sup{
      font-size: 1.8vmin;
      position: absolute;
      font-weight: normal;
    }
  }
  .form {
    display: flex;
    align-items: center;
    .text-box {
      flex: 1;
      margin-right: 3vmin;
      &.question {
        flex: 3;
        margin-right: 0;
      }
      .input-text {
        outline: none;
        border: 0;
        border-bottom: solid 1px #ccc;
        background: transparent;
      }
      .max-width {
        display: block;
        width: 100%;
        margin: 0 1vmin;
        white-space: nowrap;
      }
    }
  }
  .toolbar {
    min-width: 39vmin;
    text-align: right;
  }

  // .modal {
  //   width: 100vw;
  //   height: 100vh;
  //   position: absolute;
  //   top: 0;
  //   left: 0;
  //   backdrop-filter: blur(10px);
  //   display: none;
  //   z-index: 999;
  //   &.show {
  //     display: block;
  //     animation: showModal 0.3s;
  //     animation-timing-function: ease-in-out;
  //   }

  //   .close {
  //     width: 4vmin;
  //     height: 4vmin;
  //     border-radius: 100%;
  //     position: fixed;
  //     right: 4vw;
  //     top: 1vh;
  //     background: #000;
  //     &::before,
  //     &::after {
  //       content: " ";
  //       display: block;
  //       border-top: solid 2px #fff;
  //       width: 50%;
  //       position: absolute;
  //       top: 50%;
  //       left: 50%;
  //       transform: translateX(-50%) translateY(-50%) rotate(45deg);
  //     }
  //     &::after {
  //       transform: translateX(-50%) translateY(-50%) rotate(-45deg);
  //     }
  //   }

  //   .modal-content {
  //     padding: 6vh 4vw;
  //     display: flex;
  //     width: 100vw;
  //     height: 100vh;
  //     overflow: hidden;
  //     .remark{
  //       width: 100%;
  //       border: solid 1px #ccc;
  //       padding: 4vmin;
  //       outline: none;
  //     }
  //   }
  // }

  // @keyframes showModal {
  //   from {
  //     opacity: 0;
  //     backdrop-filter: blur(0);
  //   }
  //   to {
  //     opacity: 1;
  //     backdrop-filter: blur(10px);
  //   }
  // }
}
</style>
